<script setup lang="ts">
  import ShowEarlyWarningLine from '@/components/dataShow/ShowEarlyWarningLine.vue';
  import { reqEarlyWarning } from '@/api/module/earlyWarningApi';
  import { reactive, ref } from 'vue';
  import { isDark } from '@/hooks/core/useToggleDark';
  import { useLocale } from '@/locales/useLocale';
  const showData = reactive<{ xAxis: string[]; data: any[]; warningDate: string }>({
    xAxis: [],
    data: [],
    warningDate: '',
  });
  const isExceedsTheThreshold = ref(false);
  const EXCEEDSTHETHRESHOLD = 13500;
  reqEarlyWarning().then((res) => {
    const { data } = res;
    showData.warningDate = data.afterMonthDays[0];
    const predictData = data.PredData.map((value) => {
      if (value >= EXCEEDSTHETHRESHOLD) {
        isExceedsTheThreshold.value = true;
        return {
          value,
          symbol: 'arrow',
          symbolSize: 15,
          show: true,
          label: {
            show: true,
            position: 'top',
            color: isDark.value ? '#ec0e0e' : '#f10f0f',
            fontWeight: 'bolder',
            fontSize: 14,
          },
          itemStyle: {
            borderColor: 'rgba(207, 32, 32, 1)',
            borderWidth: 3.5,
            borderType: 'solid',
            borderDashOffset: 0,
            borderCap: 'butt',
            shadowBlur: 15,
            shadowColor: 'rgba(217, 34, 34, 1)',
          },
        };
      }
      return {
        value,
        symbol: 'diamond',
      };
    });
    //@ts-ignore
    showData.data = data.beforeOneYearData.reverse().concat(
      //@ts-ignore
      predictData
    ) as unknown[] as any[];

    //@ts-ignore
    showData.xAxis = data.oneYearBefore.reverse().concat(
      //@ts-ignore
      data.afterMonthDays
    );
  });
  const isOpen = ref(true);
  const handleClick = () => {
    isOpen.value = false;
  };
  const { t } = useLocale();
</script>

<template>
  <div class="earlyWarning">
    <ShowEarlyWarningLine :show-data="showData" />
    <div
      v-if="isExceedsTheThreshold && isOpen"
      class="over-container z-50 flex-justify-items-center fixed inset-0"
    >
      <div class="-mt-20 w-full sm:w-[40%] lg:w-[25%] bg-red-400/[80] rounded-lg">
        <el-result icon="error" title="Warning">
          <template #title>
            <div class="early-title">Warning</div>
          </template>
          <template #extra>
            <el-button type="danger" @click="handleClick">
              {{ t('message.common.okText') }}
            </el-button>
          </template>
        </el-result>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  .earlyWarning {
    @apply overflow-y-auto bg-sky-50 dark:bg-[#050713];
    height: calc(100vh - 111px);
    @media (max-width: 1024px) {
      height: calc(100vh - 100px);
    }
  }
  .over-container {
    animation: screenFlicker 0.4s infinite;
    animation-direction: alternate;
  }

  @keyframes screenFlicker {
    from {
      background: rgba(238, 42, 42, 0.4);
    }
    to {
      background: rgba(234, 20, 59, 0.9);
    }
  }
  .early-title {
    @apply text-3xl tracking-wider font-bold text-red-600;
    -webkit-background-clip: text;
  }
</style>
